/**
 * @Description:
 * @author 紫霞
 * @since 2019/1/17
 */
// React基础组件
import React from 'react'
// dva 连接组件 - 连接route和model
import { connect } from 'dva'
// 引入antd的组件
import { Row, Col, Card, Button, Tabs, Form, Popconfirm, Modal, Tooltip} from 'antd'
//导入路由组件，用于跳转等
import { Link, hashHistory } from 'dva/router'
// 导入项目全局配置文件
import config from 'config/config'

// 引入model取值工具方法
import { mapStateToProps } from 'utils/view_utils'
//引用listPage
import ListPage from 'widget/PageTmpl/ListPage'
import cx from 'classnames'
// 当前组件样式
import styles from './recommendClientsStyle.less'
import { Grid, QueryCondition } from 'widget/Grid/index'
import { AdvanceSearch } from 'widget/CollapsiblePanels/index'
import Keypress  from 'widget/Keypress'
import { chunk } from 'lodash'
//权限管理
import FlagBtn from 'widget/FlagBtn/FlagView'

/**
 * description 路由视图及事件处理
 * dispatch 分发到models中的effects对应事件名
 * model 用于获取models中state定义的数据
 * form 表单对象
 */

const routeView = function ({dispatch, model, form}) {
  // 表单的子函数
  const {resetFields, getFieldDecorator, validateFields, setFieldsValue} = form
  // 取出model对象，命名空间
  const {modelObj, namespace} = model
  let {loading, btnLoading, modalObj, currentItem, queryList, tableData, pageConfig} = modelObj
  // modelObj.xxx获取model中状态机的值
  //console.log('modelObj', modelObj)
  // 点击处理事件
  const clickHandler = (e) => {
    // 分发到model文件中effects的xxx方法
    dispatch({
      type: `${namespace}/xxx`,
      payload: {}
    })
  }
//详情跳转
  function detailSkip(id) {
    console.log("id："+id)
    hashHistory.push({
      pathname: '/home/threadAdmin/threadDetail',
      query: { clueId: id}
    });
    
  }
  // 订单编号 seckillOrderId  项目名称 projectName 类型 productType  详情 detail  活动名称 activeName 订单类型 orderTyp 状态 status 客户姓名 accountName  创建订单时间
  const columns = [
    {
      title: '省份城市', dataIndex: 'cityName', key: 'cityName' ,width:150 ,
      render: (text, item, index) => {
        return `${item.provinceName||''}${item.provinceName&&item.cityName&&' - '||''}${item.cityName||''}`
      }
    },
    {title: '推荐楼盘', dataIndex: 'productName', key: 'productName',width:130},
    {title: '推荐人', dataIndex: 'recommendUser', key: 'recommendUser',width:80},
    {title: '推荐人手机', dataIndex: 'referrerMobile', key: 'referrerMobile',width:130},
    {title: '推荐人类型', dataIndex: 'recommendUserType', key: 'recommendUserType',width:130},
    {title: '指定置业顾问', dataIndex: 'consultant', key: 'consultant',width:80},
    {title: '推荐状态', dataIndex: 'recommendStatus', key: 'recommendStatus',width:100,
      render (value, item, index){
        return {'0':'失败','1' :'成功'}[value]
      }
    },
    {title: '推荐时间', dataIndex: 'recommendTime', key: 'recommendTime',width:180 },
    {title: '客户姓名', dataIndex: 'clientName', key: 'clientName',width:100},
    {title: '客户电话', dataIndex: 'clientPhone', key: 'clientPhone',width:130},
    {title: '剩余保护期', dataIndex: 'protectDate', key: 'protectDate',width:80},
    {title: '客户状态', dataIndex: 'statusName', key: 'statusName',width:100
      // render (value, item, index) {
      //   return {'10':'待跟进','20':'验证通过','30':'已跟进','40':'已认筹','50':'已认购','60':'已签约','70':'已结算','80':'已作废','90':'已关闭'}[value]
      // }
    },
    {title: '操作', dataIndex: 'action', key: 'action',width:100,fixed:'right',
     render(content,item,index){
       return <a onClick={() => detailSkip(item.clueId)}>客户详情</a>
     }
    },
  ]
  // 表格模板配置
  const gridProps = {
    nameSpace: namespace,
    data: {
      // columns: [].concat(columns, generateAction()),
      columns: columns,
      pageConfig, tableData
    },
    pageChange: (pageNo, pageSize) => {
      console.log(pageNo, pageSize)
      dispatch({ type: `${namespace}/pageChange`, payload: {pageNo, pageSize } });
    },
    scroll: {x: 1450},
    loading
  }

  // 表格操作区域
  function generateAction () {
    return {
      title: '操作',
      key: 'operation',
      fixed: 'right',
      width: 200,
      render: (data, record, index) => {
        return (
          <span>
            <a onClick={() => updateModal({item: record, index})}>详情</a>{<span className="ant-divider"/>}
          </span>
        )
      }
    }
  }

  // 详情页跳转
  function routerGo ({type, item = {}}) {
    hashHistory.push({
      pathname: '/home/auctions/productEdit',
      query: {pageType: type, id: item.seckillProductId || ''}
    })
  }

  // 弹窗
  function updateModal ({item, index} = {}) {
    modalObj.visible = !modalObj.visible
    currentItem = item
    console.log('updateModal', item, index)
    changeState({modalObj})
    if (item) {
      dispatch({
        type: `${namespace}/getDetail`,
        payload: {id: item.seckillOrderId, index}
      })
    }
  }
  

  //修改状态
  const changeState = (payload) => {
    dispatch({
      type: `${namespace}/updateStore`,
      payload: {...payload}
    })
  }
  //修改状态
  const inputChange = (payload) => {
    let {key, value} = payload
    dispatch({
      type: `${namespace}/inputChange`,
      payload: {
        ...payload
      }
    })
  }
  //查询
  const onSearch = (payload) => {
    dispatch({
      type: `${namespace}/search`,
      payload: payload
    })
  }

  return (
    <div className={cx('pageLayout')}>
      {/*监控键盘事件，自动刷新数据*/}
      <Keypress keyCode={13} cbk={()=>{
        onSearch();
      }} />
      <div className="public_listMain">
        <div className="functionButton">
          <Tooltip title="最多只能导出15000条数据" placement={'topRight'}>
            {/* <Button type="primary"  loading={modelObj.exportLoading} onClick={() =>{
              dispatch({
                type: `${namespace}/exportFile`,
                payload: {}
              })
            }} >导出</Button> */}
            <FlagBtn node={<Button type="primary"  loading={modelObj.exportLoading} onClick={() =>{
              dispatch({
                type: `${namespace}/exportFile`,
                payload: {}
              })
            }} >导出</Button>} btnId={'50401'}> </FlagBtn>
          </Tooltip>
        </div>
        <AdvanceSearch
          footer={
            <span>
                <FlagBtn node={<Button type="primary" htmlType="submit" onClick={() => onSearch()} loading={modelObj.loading}>搜索</Button>} btnId={'50402'}> </FlagBtn>
                {/* <Button type="primary" htmlType="submit" onClick={() => onSearch()} loading={modelObj.loading}>搜索</Button> */}
                <Button onClick={() => dispatch({ type: `${namespace}/queryReset` })}>重置</Button>
              </span>
          }
        >
          <QueryCondition
            data={queryList}
            inputChange={(key, value) => dispatch({type: `${namespace}/inputChange`, payload: {key, value}})}
          />
        </AdvanceSearch>
        {/* 表格区域 */}
        <div className="boxShadow">
          {/* 添加用户 */}
          <Grid {...gridProps} />
        </div>
        <Modal
          title={'详情'}
          width='80%'
          // className="pubBiz_CommonModel"
          visible={modalObj.visible}
          onCancel={() => {updateModal()}}
          footer={null}
        >
        </Modal>
      </div>
    </div>
  )
}

// 连接视图(view)和模型(model)
export default connect(mapStateToProps)(Form.create()(routeView))

